<template>
	<view v-if="list.length > 0" class="dramaBoxAll">
		<view class="isMask" @click="isClose"></view>
		<view class="page-content-box">
			<slot name="topMess"></slot>
			<view class="dramaBox" :class=" isCloseAni ? 'isCloseAni' :'isShowAni' ">
				<view v-if="type === 'isIaaAd'" style="display: flex;justify-content: flex-end;padding-right: 20px;" >
					<image @click.stop="closePopup" style="width: 28rpx;height: 28rpx;"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_adClose.png">
					</image>
				</view>
				<view class="dramaTitle" :class="fromPage === 'mine' ? '' : 'flex justify-center-set'">
					<template v-if="fromPage === 'mine'">
						<view class="dramaTitleLeft">
							充值{{moneyName}}
							<text class="label">已领取优惠券满30-10元</text>
						</view>
						<view @click="isClose" style="width: 150rpx;height: 90rpx;display: flex;align-items: center;justify-content: flex-end;" class="closeBox">
							<image style="width: 18rpx;height: 32rpx;transform: rotate(270deg);" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/back_black.png"></image>
						</view>
					</template>
				</view>
				<view class="flex align-center text-title-money margin-bottom-xs" v-if="fromPage !== 'mine'">
					<text>解锁本集：</text>
					<text style="color: #F66E8E;" class="num-box">{{ (videoInfo || {}).goodsLocks[0] ? (videoInfo || {}).goodsLocks[0].fruitNum : 0 | fruitNum10 }}</text>
					<text> {{ moneyName }}</text>
				</view>
				<view class="balanceBox" style="margin-bottom: 24rpx;">
					<view class="balanceLeft flex align-center">
						<text>账户余额：</text>
						<text style="color: #F66E8E;">{{ balance | fruitNum10 }}</text>
						{{moneyName}}
					</view>
					<view class="balanceRight">
						<view @tap="handleViewAgree">
							<text>付费须知</text>
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
				<!-- <scroll-view style="height: calc(50vh - 90rpx - 60rpx - 20rpx - 100rpx - env(safe-area-inset-bottom));" :scroll-y="true"> -->
					<view class="dramaContent">
						<view v-for="(item, index) in list" :key="index" @click="isChoose(index)" class="outBox">
							<view v-if="item.moneyFen > 0">
								<!-- k币支付无角标的 -->
								<view
									v-if="item.buttonType === 'PAY' && !item.specialOffer"
								 	class="money-box item dfc" 
								>
									<view class="flex align-center sub-money-title">
										<text class="count">{{ item.moneyFen | fruitNum10 }}</text>
										<view class="isCenter" v-if="item.firstPresentTotal || item.presentTotal">
											<text>+</text>
											<text>
												{{ item.firstPresentTotal ? item.firstPresentTotal : item.presentTotal | fruitNum10 }}
											</text>
										</view>
										<text>{{moneyName}}</text>
									</view>
									<view class="set-money-title money">
										{{ item.moneyStr || '' }}
										<text v-if="!item.isShowLabel && item['moneyFen'] >= 3000" style="color: #999999;font-size: 26rpx;text-decoration: line-through;margin-left: 10rpx;font-weight: normal;">{{ parseFloat(((item.moneyFen + 1000) / 100).toFixed(2)) + '元' }}</text>
									</view>
									<view
										class="button-view"
										v-if="item.presentTotal || item.firstPresentTotal || (isMember && item.membershipTotal > 0)"
									>
										{{
											isMember && item.membershipTotal > 0
												? '会员充值再赠' + item.membershipTotal / 100 + '元' + moneyName
												: item.firstPresentTotal
												? '多送' + item.firstPresentTotalStr + moneyName
												: '多送' + item.presentTotalStr + moneyName
										}}
									</view>
									<view v-if="!item.isShowLabel && item['moneyFen'] >= 3000 && !item.firstPresentTotal">
										<text class="icon-zs-text">满减</text>
										<image  class="icon-zs" style="width: 92rpx;height: 88rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/ks_right.png"></image>
									</view>
									<view v-if="item.firstPresentTotal">
										<text class="icon-zs-text">首充</text>
										<image  class="icon-zs" style="width: 92rpx;height: 88rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/ks_right.png"></image>
									</view>
									<!-- v-if="!item.firstPresentTotal && item.isShowLabel" -->
									<view v-if="!item.firstPresentTotal && item.isShowLabel">
										<text class="icon-zs-text">特惠</text>
										<image  class="icon-zs" style="width: 92rpx;height: 88rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/ks_right.png"></image>
									</view>
								</view>
								<!-- k币支付有角标的 -->
								<view 
									class="money-box-two item dfc" 
									v-if="item.buttonType === 'PAY' && item.specialOffer"
								>
									<view class="flex align-center sub-money-title">
										<text class="count">{{ item.moneyFen | fruitNum10 }}</text>
										<view class="isCenter" v-if="item.firstPresentTotal || item.presentTotal">
											<text>+</text>
											<text>
												{{ item.firstPresentTotal ? item.firstPresentTotal : item.presentTotal | fruitNum10 }}
											</text>
										</view>
										<text>{{moneyName}}</text>
									</view>
									<view class="set-money-title money">
										{{ item.moneyStr || '' }}
										<text v-if="!item.isShowLabel && item['moneyFen'] >= 3000" style="color: #999999;font-size: 26rpx;text-decoration: line-through;margin-left: 10rpx;font-weight: normal;">{{ parseFloat(((item.moneyFen + 1000) / 100).toFixed(2)) + '元' }}</text>
									</view>
									
									<view
										class="button-view"
										v-if="item.presentTotal || item.firstPresentTotal || (isMember && item.membershipTotal > 0)"
									>
										{{
											isMember && item.membershipTotal > 0
												? '会员充值再赠' + item.membershipTotal / 100 + '元' + moneyName
												: item.firstPresentTotal
												? '多送' + item.firstPresentTotalStr + moneyName
												: '多送' + item.presentTotalStr + moneyName
										}}
									</view>
									<view v-if="!item.isShowLabel && item['moneyFen'] >= 3000 && !item.firstPresentTotal">
										<text class="icon-zs-text">满减</text>
										<image  class="icon-zs" style="width: 92rpx;height: 88rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/ks_right.png"></image>
									</view>
									<view v-if="item.firstPresentTotal">
										<text class="icon-zs-text">首充</text>
										<image  class="icon-zs" style="width: 92rpx;height: 88rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/ks_right.png"></image>
									</view>
									<!-- v-if="!item.firstPresentTotal && item.isShowLabel" -->
									<view v-if="!item.firstPresentTotal && item.isShowLabel">
										<text class="icon-zs-text">特惠</text>
										<image  class="icon-zs" style="width: 92rpx;height: 88rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/ks_right.png"></image>
									</view>
								</view>
								<!-- 大会员的 -->
								<view 
									class="member-box item dfc" 
									v-if="item.buttonType === 'MEMBER'"
								>
									<view class="flex align-center sub-money-title">
										全站免费看
									</view>
									<view class="set-money-title">
										<text>{{ item.moneyStr }}</text>
										<text v-if="item.linePrice" style="font-size: 28rpx; font-weight:normal;text-decoration: line-through;margin-left: 10rpx;">{{ item.linePrice }}元</text>
									</view>
									<view class="button-view">
										{{ item.total }}{{ item.membershipTimeText }}会员特权
									</view>
									<text v-if="item.label && !['EMPTY', 'VIP', 'SUB'].includes(item.label)" class="icon-mark-two">{{ labelText(item.label) }}</text>
									<text v-if="item.label && ['SUB'].includes(item.label)" class="icon-mark-two">
										{{ item.linePrice ? `立减${(item.linePrice - (item.moneyFen / 100)).toFixed(2)}元` : '立减' }}
									</text>
									<image 
										v-if="item.label && item.label === 'VIP'" 
										mode="widthFix"  
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/activeTwo/ks_vip_mark.png" 
										style="width: 110rpx; height: 40rpx; position: absolute; left: -2rpx; top: -20rpx;">
									</image>
								</view>
							</view>
							
						</view>
					</view>
				<!-- </scroll-view> -->

				<view v-if="viewSsVipBtn" class="ssVip-box">
					<image @tap="handleSubmitOrder" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/member_img4.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('../util/util.js');
export default {
	name: 'dramaList',
	props: {
		balance: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		compInfo: {
			type: Object,
			default: {}
		},
		videoInfo:{
			type:Object,
			default:{}
		},
		fromPage: {
			type: String,
			default: ''
		},
		copyLinkStatusIndex: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			moneyName:this.moneyName,
			isCloseAni:false,
			isMember:false,
			chooseIndex:0,
			moneyName:this.moneyName,
			tipsList: [
				'1.' + this.moneyName + '属于虚拟商品，一经购买不得退换；',
				'2.充值后'+this.moneyName + '可能有延迟，1小时内未到账请与客服联系；',
				'3.未满18岁的未成年应在父母或其他监护人的监护指导，同意下进行相关付费操作。'
			],
			isView: '',
			list: '',
			viewSsVipBtn: false,
			copyGroupLink: '',
			copyGroupLinkBefore: '',
			copyLinkStatus: false,
			recordList: []
		};
	},
	methods: {
		closePopup() {
			this.$emit('iaaClose');
		},
		labelText(val) {
			return {
				'EMPTY': '无',
				'SUB': '立减',
				'LIMIT': '限时',
				'PREFERENTIAL': '特惠',
				'RECOMMEND': '推荐',
				'VIP': 'VIP',
			}[val || 'EMPTY']
		},
		textTime(val) {
            return {
                'DAY': '天',
                'WEEK': '周',
                'MONTH': '个月',
                'YEAR': '年'
            }[val || 'DAY']
        },
		handleViewAgree() {
			console.log(112)
			uni.navigateTo({
                url: `/pages/toProtol/toProtol`
            })
		},
		// 会员订单提交
		handleSubmitOrder: util.throttle(async function() {
			try {
				uni.showLoading({
					title: '加载中'
				})
				// 获取ssVip会员信息
				let memberInfoSsVip = uni.getStorageSync('memberInfoSsVip')
				let {
					packageId 
				} = memberInfoSsVip
				console.log(memberInfoSsVip)
				let configMess = await getApp().getMemberMess(this, packageId)

				console.log(configMess)
				// 模板提交
				let temObj = {
					packageId: packageId,
					moneyFen:  configMess[0] ? configMess[0].nowMoneyFen : 36500
				}
				let resDataSub = await getApp().subMemberOrder(this, temObj)
				console.log(resDataSub)
				let {
					kuaiShouApi,
					orderId
				} = resDataSub

				let orderInfo = {
					order_no: kuaiShouApi.orderNo,
					order_info_token: kuaiShouApi.orderInfoToken
				}
				// 头条支付
				await getApp().ksPaySub(orderInfo)

				// 支付完成上报
				let orderMess = await getApp().czSucc(this, orderId)
				if(!orderMess) {
					if(this.copyLinkStatus && getApp().globalData.thirdIncome) {
						this.copyWatchword(this.copyGroupLinkBefore, 'noPay')
					}
				}
				if (orderMess && orderMess.payStatus == 'BE_READY') {
					if(this.copyLinkStatus && this.copyGroupLink && getApp().globalData.thirdIncome) {
						this.copyWatchword(this.copyGroupLink, 'pay')
					}

					this.$emit('czSuccess', {
						type: 'ssVipSuccess'
					})
				}
			} catch (error) {
				console.log(error)
			} finally {
				await getApp().getMemberTt(this)
				uni.hideLoading()
			}
		}, 2000),
		copyWatchword(val, type) {
			// 群口令曝光
			if(val) {
				this.$uma && this.$uma.trackEvent('Ume_password', {
					name: 'Ume_password_Internet_celebrity_PV'
				})
			}
			uni.setClipboardData({
				data: val,
				success: function() {
					if(type === 'pay') {
						this.$uma && this.$uma.trackEvent('Ume_password', {
							name: 'Ume_password_Ic_paycopy_win'
						})
					} else if(type === 'noPay') {
						this.$uma && this.$uma.trackEvent('Ume_password', {
							name: 'Ume_password_Ic_copy_win'
						})
					}
				},
				fail: function () {
					if(type === 'pay') {
						this.$uma && this.$uma.trackEvent('Ume_password', {
							name: 'Ume_password_Ic_paycopy_Defeat'
						})
					} else if(type === 'noPay') {
						this.$uma && this.$uma.trackEvent('Ume_password', {
							name: 'Ume_password_Ic_copy_Defeat'
						})
					}
				}
			});
		},
		isSure(){
			this.moneyClick(this.list[this.chooseIndex]);
		},
		isChoose(index){
			this.chooseIndex = index;
			this.moneyClick(this.list[this.chooseIndex]);
		},
		moneyClick: util.throttle(function(item) {
			console.log('item', item);
			getApp().globalData.notSetWatchWord = true;
			uni.showLoading({
				title: '加载中'
			});
			// 回传上报
			//#ifdef MP-KUAISHOU
			this.postActive('order')
			//#endif
			this.zwyRequest({
				header: {
					'content-type': 'application/json;charset=UTF-8',
					'episodic-drama-id':this.videoInfo.id ? String(this.videoInfo.id) : '0',
					'compilations-id':this.videoInfo.compilationsId ? String(this.videoInfo.compilationsId) : '0'
				},
				method: 'post',
				url: '/wealth/api/pay_client/top_up_preorder',
				data: { 
					moneyFen: item.moneyFen, 
					payUse: item.presentUse,
					buttonId: item.id,
					useId: 3 
				}
			}).then(res => {
				uni.hideLoading();
				console.log('moneyClick', res);
				this.cleanWatchWord();
				//#ifdef MP-KUAISHOU
					if (res) {
						let orderInfo = {
							order_no: res.kuaiShouApi.orderNo,
							order_info_token: res.kuaiShouApi.orderInfoToken
						};
						ks.pay({
							serviceId: '1',
							orderInfo: orderInfo,
							success: resPay => {
								console.log('success', resPay);
								this.getOrderInfo(res.orderId, item.buttonType);
							},
							fail: resPay => {
								console.log('fail', resPay);
							}
						});
					}
				//#endif
			});
		}, 2000),
		getOrderInfo(orderId, buttonType) {
			this.zwyRequest({
				header: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				method: 'post',
				url: `/wealth/api/pay_order/done?orderId=${orderId}`,
				data: { orderId: orderId }
			}).then(res => {
				console.log('getOrderInfo', res);
				if(!res) {
					if(this.copyLinkStatus && getApp().globalData.thirdIncome) {
						this.copyWatchword(this.copyGroupLinkBefore, 'noPay')
					}
				}
				// this.getBalance();
				if (res && res.payStatus == 'BE_READY') {
					uni.showToast({
						title: '充值成功',
						icon: 'none'
					});
					if(this.copyLinkStatus && this.copyGroupLink && getApp().globalData.thirdIncome) {
						this.copyWatchword(this.copyGroupLink, 'pay')
					}
					if(buttonType === 'MEMBER') {
						this.$emit('czSuccess', {
							type: 'ssVipSuccess'
						})
					} else {
						this.$emit('czSuccess');
					}
				}
			});
		},
		async isClose() {
			this.isCloseAni = true;
			setTimeout(()=>{
				this.$emit('isClose');
			},300);

			// 关闭充值重新复制
			if(this.copyLinkStatus && getApp().globalData.thirdIncome) {
				if(this.recordList && this.recordList.length){
					this.copyWatchword(this.copyGroupLink)
				} else {
					this.copyWatchword(this.copyGroupLinkBefore)	
				}
			}
			// this.setWatchWord();
		},
		dramaClick(index) {
			if (this.currentIndex != index) {
				this.$emit('changeTab', index); //设置swiper的第几页
			}
		},
		async getCopyLink() {
			try {
				let res = await this.getConfigKs()
				this.copyGroupLink = res.copyGroupLink
				this.copyLinkStatus = res.copyLinkStatus
				this.copyGroupLinkBefore = res.copyGroupLinkBefore
			} catch (error) {
				console.log(error)
			}
		},
		// 获取充值记录列表
		async getRecordList() {
			try {
				let res = await this.zwyRequest({
					url: `/wealth/api/pay_order/pay_record?nextId=${0}`
				})
				console.log(res)
				this.recordList = res
				return res
			} catch (error) {
				console.log(error)
			}
		}
	},
	created() {
		this.getRecordList()
		// 清除口令
		if(this.copyLinkStatusIndex && getApp().globalData.thirdIncome) {
			this.copyWatchword('')
		}
		// 获取快手配置信息
		this.getCopyLink()

		this.viewSsVipBtn = getApp().globalData.isConfigSsVip
		this.zwyRequest({
			method: 'GET',
			header: {
				'content-type': 'application/json;charset=UTF-8',
				'compilations-id': (this.videoInfo || {}).compilationsId || 0
			},
			url: '/wealth/api/pay_setting/v2/pay_settings'
		}).then(res => {
			console.log('showCz', res);
			if (!res) {
				return;
			}
			this.$emit('getListSuccess');
			var arr = [];
			if (res && res.length > 0) {
				arr = res.map((a) => {
					a.moneyStr = parseFloat((a.moneyFen / 100).toFixed(2)) + '元';
					a.presentTotalStr = parseFloat((a.presentTotal / 100).toFixed(2)) + '元';
					a.firstPresentTotalStr = parseFloat((a.firstPresentTotal / 100).toFixed(2)) + '元';
					a.specialOffer = a.backGroundColor === '#FF3752' ? true : false
					a.isShowLabel = a.label === 'EMPTY' ? false : true
					a.membershipTimeText = this.textTime(a.membershipTime)
					return a;
				});
			}
			this.list = arr;
		});
		// this.cleanWatchWord();
	},
	onReady() {
		this.isView = '';
		setTimeout(() => {
			this.isView = 'id' + this.currentIndex;
		}, 300);
	}
};
</script>

<style lang="scss">
	
	.label{
		background-color: #FFE6D7 !important;
		color: #F66E8E;
		font-size: 26rpx;
		padding: 6rpx 12rpx;
		font-weight: normal;
		margin-left: 10rpx;
		border-radius: 30rpx;
		margin-left: 10rpx;
	}
	.dramaTitleLeft{
		font-size: 32rpx;
		font-weight: bold;
	}
	.chooseBg{
		border: 2rpx solid #F66E8E !important;
		background-color: #fff3eb !important;
	}
	.moneyButtonBox{
		width: 100vw;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.moneyButton{
			.buttonTop{
				height: 40rpx;
				line-height: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
			.buttonDesc{
				line-height: 40rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #FFFFFF70;
			}
			height: 90rpx;
			width: 80vw;
			line-height: 90rpx;
			border-radius: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #FF6E17;
			color: white;
		}
	}
.czTipsBox {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	font-size: 12px;
	color: #999999;
}
.tipsLine {
	width: 97%;
}
.balanceBox {
	.balanceRight {
		font-size: 26rpx;
	}
	.balanceLeft {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	padding: 0 40rpx;
	color: #5A5A5A;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.isLock {
	position: absolute;
	right: 0;
	top: 0;
	width: 40rpx;
	height: 29rpx;
}
.isChoose {
	height: 32rpx;
	width: 26rpx;
}
.dramaContent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 40rpx;
	padding-bottom: env(safe-area-inset-bottom);
}
.dramaItem {
	position: relative;
	margin-right: 14rpx;
	margin-bottom: 14rpx;
	color: #ffffff;
	font-size: 24rpx;
	width: 86rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86rpx;
	background: #2a2a2a;
	border-radius: 8rpx;
}
.dramaBoxAll {
	position: fixed;
	z-index: 103;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
}
.isMask {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 101;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.8);
}
.dramaBox {
	.dramaTitle {
		// height: 90rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 32rpx;
		justify-content: space-between;
	}
	color: #000000;
	width: 100vw;
	background-color: #ffffff;
	padding: 30rpx 0 40rpx 0;
	border-radius: 39rpx 39rpx 0rpx 0rpx;
}

@keyframes isShowAni{
  from{
    transform: translateY(100%);
  }
  to{
    transform: translateY(0);
  }
}
.isShowAni{
	animation: isShowAni .3s both ease-out;
}

@keyframes isCloseAni{
  from{
    transform: translateY(0%);
  }
  to{
    transform: translateY(100%);
  }
}
.isCloseAni{
	animation: isCloseAni .3s both ease-out;
}
.outBox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320rpx;
	height: 220rpx;
	margin-bottom: 30rpx;
}
.isCenter {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.8);
	animation: show11 0.2s linear 0s 1 normal none running;
}
.specialOffer {
	background-color: #ff3752;
}
.specialOfferBlack {
	color: #000000;
}
.specialOfferWhite {
	color: #ffffff;
}
.dfc {
	display: flex;
	align-items: center;
	justify-content: center;
}
.tit {
	font-size: 30rpx;
	color: #5d5d5d;
	height: 40rpx;
	line-height: 40rpx;
}
.h2 {
	height: 60rpx;
	padding-left: 20rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	position: relative;
	color: #5d5d5d;
}
.balance {
	position: absolute;
	right: 33rpx;
	font-size: 24rpx;
	color: #636363;
	top: 0;
	bottom: 0;
	margin: auto;
}
.h2 .icon-wx {
	display: none;
	width: 54rpx;
	height: 50rpx;
	margin-right: 16rpx;
}
.item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 10rpx 0;
	width: 320rpx;
	height: 220rpx;
	background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 100%);
	border-radius: 15rpx;
	border: 2rpx solid #E6E6E6;
	position: relative;
	color: #000000;

	&.money-box {
		.set-money-title {
			font-size: 42rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #050303;
			line-height: 59rpx;
			margin: 6rpx 0 9rpx;
		}

		.sub-money-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 45rpx;
		}
		
		.button-view {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #EA4C5A;
			line-height: 45rpx;
		}
	}
	&.money-box-two{
		background: linear-gradient(180deg, #FFFEF4 0%, #FAE4F0 100%);
		.set-money-title {
			font-size: 42rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #EA4C5A;
			line-height: 59rpx;
			margin: 6rpx 0 9rpx;
		}

		.sub-money-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 45rpx;
		}
		
		.button-view {
			width: 260rpx;
			height: 54rpx;
			background: #EA4C5A;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 54rpx;
			text-align: center;
		}
	}

	&.member-box {
		background: linear-gradient(180deg, #ED5D78 0%, #EB4555 100%);
		border: 2rpx solid #BD4666;
		.set-money-title {
			font-size: 42rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFEAAA;
			line-height: 59rpx;
			margin: 6rpx 0 9rpx;
		}

		.sub-money-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 45rpx;
		}
		
		.button-view {
			width: 260rpx;
			height: 54rpx;
			background: linear-gradient(90deg, #FFFAED 0%, #FCF0C8 100%);
			border-radius: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #EF1017;
			line-height: 54rpx;
			text-align: center;
		}
		.icon-mark-two {
			position: absolute;
			left: -2rpx;
			top: -20rpx;
			padding: 0 24rpx;
			letter-spacing: 2rpx;
			height: 40rpx;
			background: linear-gradient(90deg, #686568 0%, #3C3837 100%);
			border-radius: 20rpx 0rpx 20rpx 0rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}
.item .money {
	font-size: 34rpx;
	line-height: 36rpx;
	font-weight: bold;
}
.item .count {
	display: flex;
	align-items: center;
	justify-content: center;
}
.countColor {
	color: #636363;
}
.item .count .present {
	color: #ff7200;
}
.xinshouImg {
	position: absolute;
	left: 0;
	right: 0;
	top: -20rpx;
	width: 100%;
	height: 69rpx;
	margin: auto;
}
.item .icon-zs {
	position: absolute;
	width: 84rpx;
	height: 84rpx;
	top: -2rpx;
	right: -2rpx;
}
.item .icon-zs-text {
	position: absolute;
	width: 84rpx;
	height: 84rpx;
	top: 10rpx;
	right: -20rpx;
	z-index: 99;
	color: #fff;
    transform: rotate(45deg);
	line-height: 48rpx;
    transform-origin: center center;
    display: inline-block;
	font-size: 22rpx;
}
.item .icon-sq {
	position: absolute;
	width: 84rpx;
	height: 84rpx;
	top: 0;
	right: 0;
}
.font-red {
	color: #F66E8E;
}
@keyframes show11 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes show111 {
	from {
		transform: translateY(120%);
	}
	to {
		transform: translateY(0);
	}
}

.tipsBox {
	width: 570rpx;
	height: 362rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
}
.tipsDes {
	width: 540rpx;
	padding: 95rpx 0 77rpx 0;
	margin: auto;
	position: relative;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 30rpx;
}
.tipsBtnBox {
	display: flex;
	align-items: center;
	justify-content: center;
}
.leftBtn,
.rightBtn {
	display: flex;
	width: 253rpx;
	height: 80rpx;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #ffffff;
	border-radius: 16rpx;
}
.leftBtn {
	background-color: #d8d8d8;
	margin-right: 24rpx;
}
.rightBtn {
	background-color: #ff7200;
}
.dingyueBox {
	width: 570rpx;
	height: 480rpx;
	position: relative;
	background-color: #ffffff;
	border-radius: 12rpx;
}
.dingyueBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 270rpx;
	height: 72rpx;
	position: absolute;
	top: 334rpx;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #07c160;
	border-radius: 8rpx;
	color: #ffffff;
}
.dingyueIcon {
	width: 36rpx;
	margin-right: 12rpx;
	height: 30rpx;
}
.dingyueTitle {
	font-size: 32rpx;
	position: absolute;
	top: 114rpx;
	left: 0;
	right: 0;
	margin: auto;
	color: #000000;
	text-align: center;
	font-weight: 500;
}
.dingyueTips {
	position: absolute;
	top: 203rpx;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 28rpx;
	text-align: center;
}

.balance {
	position: absolute;
	right: 33rpx;
	font-size: 24rpx;
	color: #636363;
	top: 0;
	bottom: 0;
	margin: auto;
}
.title {
	padding-left: 20rpx;
	height: 100rpx;
	line-height: 100rpx;
}

.h2 {
	width: 100%;
	height: 60rpx;
	margin-bottom: 10rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	position: relative;
	color: #5d5d5d;
}
.moneyBox {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	z-index: 999;
	top: 0;
	background-color: rgba(0, 0, 0, 0.493);
}
.dramaListBox {
	padding: 0 4%;
	position: absolute;
	bottom: 0;
	left: 0;
	flex-direction: column;
	width: 100%;
	height: 63%;
	background-color: #ffffff;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
}

.ssVip-box {
	// margin-top: 34rpx;
	margin-bottom:  calc(48rpx + env(safe-area-inset-bottom));
	display: flex;
	justify-content: center;
	align-items: center;
	image {
		width: 666rpx;
		height: 156rpx;
	}
}

.justify-center-set {
	justify-content: center !important;
}

.page-content-box {
	position: absolute;
	z-index: 102;
	bottom: 0;
}

.text-title-money {
	color: #5A5A5A;
	padding: 0 40rpx;
	font-size: 26rpx;;
}
</style>
